<template>
    <view class="page-home-index">
		<u-sticky>
			<!-- 只能有一个根元素 -->
			<view class="search-sticky">
				<u-row gutter="0">
					<u-col span="3" v-for="(item,index) in tab.list" :key="index">
						<view class="text-center">
                            <view class="inline-block" :class="tab.current == index ? 'current' : ''" @click="changeTab(index)">
                                <text class="name">{{ item.name }}</text>
                            </view>
                        </view> 
					</u-col>
				</u-row>
			</view>
		</u-sticky>
		<view class="p-4" v-if="tab.list[tab.current].records.length == 0">
            <u-empty text="暂无内容" mode="list"></u-empty>
    </view>
		<view class="fly-card" v-else>
                <view class="item" v-for="(item,index) in tab.list[tab.current].records" :key="index" @click="proxy.$util.gotoPage('/packageB/activity/detail',{id:item.id})">
                    <view class="thumb">
                        <u-image width="100%" height="300rpx" :src="proxy.$util.getFullImage(item.coverImageUrl)"></u-image>
                    </view>
                    <view class="content">
                        <view class="title font-bold ellipsis-1">{{ item.activitiesName }}</view>
                        <view class="flex-between mt-2 mb-3">
                            <view class="tags">
                                <u-tag class="tag-cyan tag-noborder mr-1" :text="proxy.$util.setName(item.activitiesType, optionData.activitiesType)" />
                                <u-tag v-if="item.isCheckinRequired == '1'" class="tag-red tag-noborder" text="签到" />
                            </view>
                            <!-- <view class="grey9"><u-icon name="map"></u-icon>0.5km</view> -->
                        </view>
                        <view class="desc">
                            <view>时间：<text class="c-black">{{ dayjs(item.startTime).format('MM/DD HH:mm') }} {{ proxy.$util.getWeekName(dayjs(item.startTime).day()) }}</text></view>
                            <view class="ellipsis-1">地点：<text class="c-black">{{ item.address || '线上'  }}</text></view>
                            <view>报名：<text class="c-black">{{item.registrationsCount}}/{{ item.maxParticipants }}</text></view>
                        </view>
                    </view>
                </view>
            </view>
    </view>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
import {onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { useAppStore } from '@/stores/app';
import { useOptionData } from '@/stores/optionData';
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const appStore = useAppStore();
const optionDataStore = useOptionData();
let tab = reactive({
	current: 0,
	list:[
		{id:0, name: '待参加',records: [], current: 1, size: 10, total:0, api: '/admin/activities/xcxUserIdActivitiesPage'},
		{id:1, name: '已参加',records: [], current: 1, size: 10, total:0, api: '/admin/activities/xcxUserIdActivitiesPage'},
		{id:2, name: '已发起',records: [], current: 1, size: 10, total:0, api: '/admin/activities/xcxUserIdActivitiesPage'},
		{id:1, name: '待审核',records: [], current: 1, size: 10, total:0, api: '/admin/activities/xcxPage'},
	]
});
let optionData = reactive({});
const getInitData = async () => {
  let activitiesType = await optionDataStore.getDictList('activitie_type');
  optionData.activitiesType = activitiesType;
}
const changeTab = (i) => {
	tab.current = i;
    if(tab.list[tab.current].records.length == 0){
        getList('refresh');
    }
}
const getList = (type) => {
    let obj = tab.list[tab.current];
      if(type == 'refresh'){  
        obj.current = 1;
        obj.records = [];
      }else{
        if(obj.total > obj.records.length){
          obj.current ++;        
        }else{
          uni.showToast({title:'没有更多了',icon: 'none'});
          return;
        }
      };
      let params = {
        current: obj.current,
        size: obj.size,
        userId: appStore.userInfo.userId,
        initiatorUserId: appStore.userInfo.userId,
        // queryType: obj.id,
      };
      if(tab.current == 3){
        params.status = obj.id;
      }else{
        params.queryType = obj.id;
      }
      proxy.$http('get', obj.api, proxy.$util.getParam(params) ,(data,msg) => {
          obj.records = obj.records.concat(data.records);
          obj.total = data.total;
      },msg => {

      });
};
onPullDownRefresh(() => {
	getList('refresh');
	setTimeout( () => {
		uni.stopPullDownRefresh();
	}, 1000);
});
onReachBottom(() =>{
	getList();
});
onShow(() => {
	getInitData();
	getList('refresh');
})
</script>